import * as echarts from 'echarts'
export const useOptionsOne = () => {
  const data = ref<number[]>([])
  const loading = ref(false)
  const option = computed(() => {
    return {
      backgroundColor: '#323a5e',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '2%',
        right: '4%',
        bottom: '14%',
        top: '16%',
        containLabel: true
      },
      legend: {
        data: ['申请总数', '基准线'],
        right: 10,
        top: 12,
        textStyle: {
          color: '#fff'
        },
        itemWidth: 12,
        itemHeight: 10
        // itemGap: 35
      },
      xAxis: {
        type: 'category',
        data: [
          '预算申请',
          '采购申请',
          '维修申请',
          '领用申请',
          '调拨申请',
          '报废申请',
          '借用申请',
          '资产复活申请'
        ],
        axisLine: {
          lineStyle: {
            color: 'white'
          }
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            fontFamily: 'Microsoft YaHei'
          }
        }
      },

      yAxis: {
        type: 'value',
        // max: '1200',
        axisLine: {
          show: false,
          lineStyle: {
            color: 'white'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.3)'
          }
        },
        axisLabel: {}
      },
      dataZoom: [
        {
          show: true,
          height: 12,
          xAxisIndex: [0],
          bottom: '8%',
          start: 10,
          end: 90,
          handleIcon:
            'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: '#d3dee5'
          },
          textStyle: {
            color: '#fff'
          },
          borderColor: '#90979c'
        },
        {
          type: 'inside',
          show: true,
          height: 15,
          start: 1,
          end: 35
        }
      ],
      series: [
        {
          name: '申请总数',
          type: 'bar',
          barWidth: '10%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#8bd46e'
                },
                {
                  offset: 1,
                  color: '#09bcb7'
                }
              ]),
              barBorderRadius: 12
            }
          },
          data: data.value
        },
        {
          name: '基准线',
          type: 'line',
          data: data.value,
          lineStyle: {
            normal: {
              width: 4,
              color: {
                type: 'linear',

                colorStops: [
                  {
                    offset: 0,
                    color: '#A9F387' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#48D8BF' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(72,216,191, 0.3)',
              shadowBlur: 5,
              shadowOffsetY: 10
            }
          },
          itemStyle: {
            normal: {
              color: '#fff',
              borderWidth: 5,
              borderColor: '#A9F387'
            }
          },
          smooth: true
        }
      ]
    }
  })
  return {
    loading,
    option,
    data
  }
}
